import React, { Component, createElement } from "react";
import { RouterContext } from "./RouterContext";
import matchPath from "./matchPath";
export default class Route extends Component {
      constructor(props) {
            super(props);
      }

      render() {
            let { children, component, render, path, computedMatch } =
                  this.props;
            return (
                  <RouterContext.Consumer>
                        {(context) => {
                              let { location } = context;
                              let match =
                                    computedMatch ||
                                    matchPath(location.pathname, path);
                              let props = {
                                    ...context,
                                    match,
                              };
                              console.log(match, "match");
                              // 判断match是否存在
                              // 判断children > component > render
                              return (
                                    // 这里需要重新在将props传递下去，保证hook可以消费到正确的值，不然拿到的是最上层的默认值
                                    <RouterContext.Provider value={props}>
                                          {match
                                                ? children
                                                      ? typeof children ===
                                                        "function"
                                                            ? children(props)
                                                            : children
                                                      : component
                                                      ? createElement(
                                                              component,
                                                              props
                                                        )
                                                      : render
                                                      ? render(props)
                                                      : null
                                                : typeof children === "function"
                                                ? children(props)
                                                : null}
                                    </RouterContext.Provider>
                              );
                        }}
                  </RouterContext.Consumer>
            );
      }
}
